<template>
  <div>
    <div  style="height:75vh;width:100%;overflow:auto;border:1px">
    <Book v-for="(v,i) in books" :key="i" :book="v" v-show="item=='cp' && v.is_show"></Book>
    <Model v-for="(v,i) in books" :key="100+i" :book="v" v-show="item=='mb'"></Model>
    </div>
    <div style="text-align:left;margin-top:1rem;margin-bottom:1rem">
        <el-button type = "primary" @click="addTableData()"  size="small">新增</el-button>
        <el-button type = "primary" @click="delData()"  size="small">删除</el-button>
        <el-button type = "primary" @click="saveData()"  size="small">保存</el-button>
        <el-button type = "primary" @click="cancelBtn()"  size="small">取消</el-button>
        <el-button type = "primary" @click="search = true"  size="small" v-show="item=='cp'">查询</el-button>
    </div>
    <el-dialog
      title="查询"
      :visible.sync="search"
      width="60%"
      >
        <el-form :model='book' status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="作品编号">
              <el-col :span="8">
                <el-input placeholder="作品编号" v-model="book.code"></el-input>
              </el-col>
              <el-col class="line" :span="4"><span style="padding-left:1rem">作品类型</span></el-col>
                <el-col :span="8">
                <el-input placeholder="作品类型" v-model="book.type"></el-input>
              </el-col>
            </el-form-item>
            
            <el-form-item label="作者">
              <el-col :span="8">
                <el-input placeholder="作者" v-model="book.name"></el-input>
              </el-col>
              <el-col class="line" :span="4"><span style="padding-left:1rem">点赞数量</span></el-col>
                <el-col :span="8">
                <el-input placeholder="点赞数量" v-model="book.like"></el-input>
              </el-col>
            </el-form-item>
            
            <el-form-item label="作品名称">
              <el-col :span="8">
                <el-input placeholder="作品名称" v-model="book.book_name"></el-input>
              </el-col>
              <el-col class="line" :span="4"><span style="padding-left:1rem">浏览量</span></el-col>
                <el-col :span="8">
                <el-input placeholder="浏览量" v-model="book.views"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item label="发布时间">
              <el-col :span="8">
                <el-input placeholder="发布时间" v-model="book.time"></el-input>
              </el-col>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="searchBookOrModel()">查询</el-button>
              <el-button @click="cancelBtn()">取消</el-button>
              <el-button @click="clearSearch()">清空</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

  </div>

  
</template>

<script>
import Book from './Book.vue'
import Model from './Model.vue'
export default {
  components: {
    Book,
    Model
  },
  props: ['item'],
  data () {
    return {
      books: [],
      search: false,
      book: {code: '', name: '', book_name: '', des: '', time: '', remark: '', views: '', like: '', model: ''}
    }
  },
  mounted () {
    this.getSelfTableData()
  },
  methods: {
    addTableData () {
      let j = {code: '', name: '', book_name: '', des: '', time: '', remark: '', views: '', like: '', model: '', _from: this.item, isSet: false, isSelected: false, is_show: true}
      this.books.splice(0, 0, j)
    },
    getSelfTableData () {
      this.books.length = 0
      var sql = "select * from works where `_from` = '" + this.item + "'"
      this.$db.all(sql, (err, res) => {
        if (err) {
          this.$message.warning('获取数据失败 er：' + err)
        } else {
          for (var i = 0; i < res.length; i++) {
            res[i]['isSet'] = true
            res[i]['isSelected'] = false
            res[i]['is_show'] = true
            this.books.push(res[i])
          }
          this.books.reverse()
          console.log(this.books.length)
        }
      })
    },
    saveData () {
      for (let index in this.books) {
        let book = this.books[index]
        if (!book.isSet) {
          if (book.id) {
            const SQL = `update works set code='${book.code}',
            name='${book.name}',
            book_name='${book.book_name}',
            des='${book.des}',
            time='${book.time}',
            remark='${book.remark}',
            views='${book.views}',
            like='${book.like}',
            model='${book.model}' where id = ${book.id}
            `
            console.log(SQL)
            this.$db.run(SQL, err => {
              if (err) {
                this.$message.warning('保存失败 er：' + err)
              } else {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.clearTableState()
                this.getSelfTableData()
              }
            })
          } else {
            const SQL = `INSERT INTO works (code,name,book_name,des,time,remark,views,like,model,_from)
            VALUES ('${book.code}','${book.name}','${book.book_name}','${book.des}','${book.time}','${book.remark}','${book.views}','${book.like}','${book.model}','${this.item}')`
            console.log(SQL)
            this.$db.run(SQL, err => {
              if (err) {
                this.$message.warning('保存失败 er：' + err)
              } else {
                book.isSet = true
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                delete this.books[index]
                this.getSelfTableData()
              }
            })
          }
        }
      }
    },
    cancelBtn () {
      this.search = false
      this.clearSearch()
      this.getSelfTableData()
    },
    delData () {
      for (let book of this.books) {
        if (book.isSelected) {
          console.log(book.name, book.isSelected, book.id)
          var sql = 'delete  from works where `id` = ' + book.id
          this.$db.all(sql, (err, res) => {
            if (err) {
              this.$message.warning('删除数据失败 er：' + err)
            } else {
              this.getSelfTableData()
            }
          })
        }
      }
    },
    findWithCondition (arr, prop) {
      for (let book of this.books) {
        if (book[prop['condition']] === prop['value']) {
          arr.push(book)
        }
      }
    },
    searchBookOrModel () {
      this.reset()
      for (let condition in this.book) {
        if (this.book[condition] !== '') {
          for (let b of this.books) {
            console.log('x====>', b[condition], this.book[condition])
            if (b[condition].toString() !== this.book[condition].toString()) {
              b.is_show = false
            }
          }
        }
      }
      // for (let b of this.books) {
      //   console.log(b)
      //   if (b.code === this.book.code && b.name === this.book.name && b.book_name === this.book.book_name &&
      //   b.like === this.book.like && b.views === this.book.views && b.time === this.book.time) {
      //     b.is_show = true
      //   } else {
      //     b.is_show = false
      //   }
      // }
    },
    clearSearch () {
      this.book = {code: '', name: '', book_name: '', des: '', time: '', remark: '', views: '', like: '', model: ''}
      this.reset()
    },
    reset () {
      for (let b of this.books) {
        b.is_show = true
      }
    }
  }
}
</script>
